<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册表单</title>
		<style type="text/css">
			input {
				outline: none;
			}

			table {
				text-align: right;
				box-sizing: border-box;
				padding: 16px;
				background-color: orangered;
				margin: 140px auto;
			}
			

			#search {
				/* margin-left: 50px; */
			}

			#cancel {
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
		<div id="table">
			<table border="0">
				<tr>
					<th>用户名</th>
					<td><input type="text" id="userName" value="" placeholder="*请输入用户名" /></td>
				</tr>
				<tr>
					<th>昵称</th>
					<td><input type="text" value="" id="Nickname" placeholder="*取个昵称吧" /></td>
				</tr>
				<tr>
					<th>邮箱</th>
					<td><input type="text" id="E_mail" value="" placeholder="请输入邮箱" /></td>
				</tr>
				<tr>
					<th>身份证</th>
					<td><input type="text" id="ids" value="" placeholder="*请输入身份证" /></td>
				</tr>
				<tr>
					<th>手机号码</th>
					<td><input type="text" id="phone" value="" placeholder="*手机" /></td>
				</tr
				<tr>
					<th>生日</th>
					<td><input type="text" id="birthday" value="" placeholder="*破壳日" /></td>
				</tr>
				<tr>
					<th>密码</th>
					<td><input type="password" id="passWord" placeholder="*请输入密码" /></td>
				</tr>
				<tr>
					<th>确认密码</th>
					<td><input type="password" id="pass" placeholder="*请再次确认密码" /></td>
				</tr>
				<tr>

					<th>验证码</th>
					<td><input type="text" id="Vcode" value="" placeholder="*输入验证码" /></td>
				</tr>
				<tr>
					<th><button type="button" id="search">注册</button></th>
					<td><button type="button" id="cancel">取消</button></td>
				</tr>
			</table>

		</div>
		<script type="text/javascript">
			var userName = document.querySelector('#userName');
			var Nickname = document.querySelector("#Nickname");
			var Email = document.querySelector('#E_mail');
			var ids = document.querySelector('#ids');
			var passWord = document.querySelector('#passWord');
			var pass = document.querySelector('#pass');
			var srarchBtn = document.querySelector('#search');
			var cancel = document.querySelector('#cancel');
			var birthday = document.querySelector('#birthday')
			
			//书写正则
			//用户名首字母必须英文，字数要6-20个，且只能用数字、字母、下划线和横杠，不能使用特殊字符
			var nameTex = /^[a-z](\w|\-){5,20}$/i
			//只能3-6个中文
			var NickTex = /[\u4e00-\u9fa5]{3,6}/
			//验证邮箱格式的正则
			var EamilTex = /^[a-z]\w{6,12}@(163|126|qq)\.(com|net|cn|sina)$/
			//身份证验证正则
			var idsTex=/^\d{17}(\d|X)$/
			//手机号码验证正则
			var phoneTex=/^1[3-9]\d{9}/
			//验证生日正则
			var birthdayTex=/^[1-2][0-29][6-9]\d(-|\/)?(0[1-9]|1[0-2])\1(0[1-9]|[1-2]\d|3[0-1])$/
			//验证密码
			var passWordTex=/^[0-9a-zA-Z\S]{6,19}$/
			
		/* 	var res='123sdwZa'
			   console.log(passWordTex.test(res)) */
			srarchBtn.onclick = function() {
				
				
			if (userName.value === '') {

					alert('用户名不能为空')
					return
				} else if (nameTex.test(userName.value) === false) {
					alert('用户名首字母必须大写，字数要6-20个，且只能用数字、字母、下划线和横杠，不能使用特殊字符')
					userName.value = ''
					return
				}
				if (Nickname.value === '') {
					alert('昵称不能为空')
					return

				} else if (NickTex.test(Nickname.value) === false) {
					alert('昵称必须是3-6个中文组成')
					Nickname.value = ''
					return
				}
				if (Email.value === '') {
					alert('邮箱不能为空')
					return
				
				} else if (EamilTex.test(Email.value) === false) {
					alert('亲你的邮箱格式不对哦')
					Email.value = ''
					return
				} 
				 if (ids.value === '') {
					alert('身份证要写')
					return
				
				} else if (idsTex.test(ids.value) === false) {
					alert('身份证格式不对')
					ids.value = ''
					return
				}
				if (phone.value === '') {
					alert('手机号码必须填哦')
					return
				
				} else if (phoneTex.test(phone.value) === false) {
					alert('手机号码不正确')
					phone.value = ''
					return
				}
				if (birthday.value === '') {
					alert('生日也要写哦')
					return
				
				} else if (birthdayTex.test(birthday.value) === false) {
					alert('生日格式不对')
					birthday.value = ''
					return
				} 
					
					if (passWord.value === '') {
						alert('密码不写会被人偷看的')
						return
					
					} else if (passWordTex.test(passWord.value) === false) {
						alert('密码不能包含空格 ，长度6-20')
						passWord.value = ''
						return
					} else if(passWord.value!==pass.value){
						alert('密码不一致请重新输入')
					}else{
						
						alert('注册成功')
					}
			}
		</script>
	</body>
</html>
